<template>
  <div class="container">
    <h1>综合月报</h1>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="二号稠油联合处理站化学助剂处理台账" name="first">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              v-model="paramMonth"
              type="monthrange"
              style="margin-left: 10px"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table :data="paginatedData" border stripe style="width: 100%">
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="常规原油处理">
              <el-table-column label="处理液量(m³)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="原油脱出污水量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOil004
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD密闭处理">
              <el-table-column label="处理液量(m³)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理剂加药量(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂加药量(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="产油量(m³)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed004
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="产水量(m³)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealed005
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD循环液处理">
              <el-table-column label="除油沉降罐进液量(m³)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycle001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="净水剂(Kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycle002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂(Kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycle003
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污水处理">
              <el-table-column label="反应器处理水量(m³)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="过滤器出水量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="污水进调储罐量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1-5#反应器处理水量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater004
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6#反应器处理水量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater005
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1-5#净水剂(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater006
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="3000方净水剂加药量(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater007
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1#-5#助凝剂(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater008
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6#助凝剂(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater009
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅反应器水量(m³)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater010
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅预处理剂(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater011
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWater012
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污泥处理">
              <el-table-column label="叠螺机处理量(m³)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.mud001 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="叠螺机加药量(kg)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.mud002 }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="常规原油处理">
              <el-table-column label="正相加药浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOilProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相加药浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.normOilProcess002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD密闭处理站">
              <el-table-column label="预处理剂浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealedProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂加药浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdSealedProcess002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD循环液处理">
              <el-table-column label="净水剂加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycleProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.sagdRecycleProcess002
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污水处理">
              <el-table-column label="1-5#净水剂浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="3000方净水剂加药浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="1#-5#助凝剂浓度(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6#助凝剂浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess004
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅预处理剂(mg/L)" width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess005
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂浓度(mg/L)" width="110">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.foulWaterProcess006
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污泥处理">
              <el-table-column label="离心机加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.mudProcess001
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="totalItems"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MVC高含盐深度处理" name="second">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              v-model="paramMonth"
              type="monthrange"
              style="margin-left: 10px"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table :data="paginatedMvcData" border stripe style="width: 100%">
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="处理水量(m³)" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.mvc001"
                  placeholder="请输入"
                  type="number"
                  size="small"
                  @input="handleInput(scope, 'mvc001')"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="净化软化水量(m³)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc002 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="高温膜+宇澄排污水量(m³)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc003 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="碱液加药量(Kg)" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.mvc004"
                  placeholder="请输入"
                  type="number"
                  size="small"
                  @input="handleInput(scope, 'mvc004')"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="产水量(m³)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc005 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="浓水量(m³)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc006 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="来水电导率(μs/cm)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc007 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水电导率(μs/cm)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc008 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水率%" width="150">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.mvc009"
                  placeholder="请输入"
                  type="number"
                  size="small"
                  @input="handleInput(scope, 'mvc009')"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="碱液浓度(mg/l)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc010 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="矿化度＜50mg/l" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc011 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产水率(浓水反算）" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mvc012 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.row)"
                >
                  保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="mvcCurrentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mvcPageSize"
            :total="mvcTotalItems"
            @current-change="mvchandlePageChange"
            @size-change="mvchandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新奥达油水回收处理" name="third">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              v-model="paramMonth"
              type="monthrange"
              style="margin-left: 10px"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table
            :data="paginatednewOdData"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column label="日期" width="240">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <!-- 新奥达处理量 (可编辑) -->
            <el-table-column label="新奥达处理量(m3/d)" width="270">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.newOd001"
                  size="small"
                  placeholder="请输入处理量"
                  type="number"
                  @input="handleInput(scope, 'newOd001')"
                ></el-input>
              </template>
            </el-table-column>
            <!-- 新奥达加药量 (可编辑) -->
            <el-table-column label="新奥达加药量(t/d)" width="270">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.newOd002"
                  size="small"
                  placeholder="请输入加药量"
                  type="number"
                  @input="handleInput(scope, 'newOd002')"
                ></el-input>
              </template>
            </el-table-column>
            <!-- 新奥达加药浓度 (可编辑) -->
            <el-table-column label="新奥达加药浓度(mg/L)" width="280">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.newOd003"
                  size="small"
                  placeholder="请输入加药浓度"
                  type="number"
                  @input="handleInput(scope, 'newOd003')"
                ></el-input>
              </template>
            </el-table-column>
            <!-- 新奥达回水量 (可编辑) -->
            <el-table-column label="新奥达回水量(m3/d)" width="270">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.newOd004"
                  size="small"
                  placeholder="请输入回水量"
                  type="number"
                  @input="handleInput(scope, 'newOd004')"
                ></el-input>
              </template>
            </el-table-column>
            <!-- 新奥达回油量 (可编辑) -->
            <el-table-column label="新奥达回油量(m3/d)" width="270">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.newOd005"
                  size="small"
                  placeholder="请输入回油量"
                  type="number"
                  @input="handleInput(scope, 'newOd005')"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.row)"
                >
                  保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="newOdCurrentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="newOdPageSize"
            :total="newOdTotalItems"
            @current-change="newOdhandlePageChange"
            @size-change="newOdhandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="污油处理及回掺统计" name="fourth">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              v-model="paramMonth"
              type="monthrange"
              style="margin-left: 10px"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table
            :data="paginatedoilPollutionData"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column label="日期" width="240">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="处理液量(t)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution001
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="A加药量kg" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution002
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="A加药浓度(mg/L)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution003
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="B加药量kg" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution004
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="B加药浓度(mg/L)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution005
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回掺液量(t)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution006
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回掺油量(t)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution007
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回掺比例" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution008
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日处理污油量t/d" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution009
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="污油来源" width="300">
              <!-- eslint-disable-next-line -->
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution010
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="回掺点" width="150">
              <!-- eslint-disable-next-line -->
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.oilPollution011
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                  >保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="oilPollutionCurrentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="oilPollutionPageSize"
            :total="oilPollutionTotalItems"
            @current-change="oilPollutionhandlePageChange"
            @size-change="oilPollutionhandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const calculationConfig = {
  normOil001: "sum",
  normOil002: "sum",
  normOil003: "sum",
  normOil004: "sum",
  sagdSealed001: "sum",
  sagdSealed002: "sum",
  sagdSealed003: "sum",
  sagdSealed004: "sum",
  sagdSealed005: "sum",
  sagdRecycle001: "sum",
  sagdRecycle002: "sum",
  sagdRecycle003: "sum",
  foulWater001: "sum",
  foulWater002: "sum",
  foulWater003: "sum",
  foulWater004: "sum",
  foulWater005: "sum",
  foulWater006: "sum",
  foulWater007: "sum",
  foulWater008: "sum",
  foulWater009: "sum",
  foulWater010: "sum",
  foulWater011: "sum",
  foulWater012: "sum",
  mud001: "sum",
  mud002: "sum",
  normOilProcess001: "average",
  normOilProcess002: "average",
  sagdSealedProcess001: "average",
  sagdSealedProcess002: "average",
  sagdRecycleProcess001: "average",
  sagdRecycleProcess002: "average",
  foulWaterProcess001: "average",
  foulWaterProcess002: "average",
  foulWaterProcess003: "average",
  foulWaterProcess004: "average",
  foulWaterProcess005: "average",
  foulWaterProcess006: "average",
  mudProcess001: "average",
};
const mvcCalculationConfig = {
  mvc001: "sum",
  mvc002: "sum",
  mvc003: "sum",
  mvc004: "sum",
  mvc005: "sum",
  mvc006: "sum",
  mvc007: "average",
  mvc008: "average",
  mvc009: "average",
  mvc010: "average",
  mvc011: "average",
  mvc012: "average",
};
const newOdCalculationConfig = {
  newOd001: "sum",
  newOd002: "sum",
  newOd003: "sum",
  newOd004: "sum",
  newOd005: "sum",
};
const oilPollutionCalculationConfig = {
  oilPollution001: "sum",
  oilPollution002: "sum",
  oilPollution003: "average",
  oilPollution004: "sum",
  oilPollution005: "average",
  oilPollution006: "sum",
  oilPollution007: "sum",
  oilPollution008: "average",
  oilPollution009: "average",
};
export default {
  data() {
    return {
      activeName: "first",
      currentPage: 1, // 当前页码
      mvcCurrentPage: 1, // mvc当前页码
      newOdCurrentPage: 1, // 新奥达当前页码
      oilPollutionCurrentPage: 1, // 油污处理当前页码
      pageSize: 10, // 每页显示的数据条数
      mvcPageSize: 10, // mvc每页显示的数据条数
      newOdPageSize: 10, // mvc每页显示的数据条数
      oilPollutionPageSize: 10, // 油污处理每页显示的数据条数
      paramMonth: ["2024-01", "2024-07"],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "2024-01",
          normOil001: 309736,
          normOil002: 294003,
          normOil003: 48278,
          normOil004: 26485,
          sagdSealed001: 352360,
          sagdSealed002: 25406,
          sagdSealed003: 26502,
          sagdSealed004: 42902,
          sagdSealed005: 309459,
          sagdRecycle001: 22526,
          sagdRecycle002: 29525,
          sagdRecycle003: 51154,
          foulWater001: 1153901,
          foulWater002: 907377,
          foulWater003: 238668,
          foulWater004: 963314,
          foulWater005: 190587,
          foulWater006: 486000,
          foulWater007: 9500,
          foulWater008: 2845600,
          foulWater009: 538800,
          foulWater010: 915233,
          foulWater011: 299220,
          foulWater012: 1635000,
          mud001: 20226,
          mud002: 0,
          normOilProcess001: 156,
          normOilProcess002: 44,
          sagdSealedProcess001: 72,
          sagdSealedProcess002: 75,
          sagdRecycleProcess001: 1311,
          sagdRecycleProcess002: 2271,
          foulWaterProcess001: 505,
          foulWaterProcess002: 50,
          foulWaterProcess003: 9,
          foulWaterProcess004: 8,
          foulWaterProcess005: 327,
          foulWaterProcess006: 447,
          mudProcess001: 0,
        },
      ],
      mvcTableData: [
        {
          id: 1,
          date: "2024-01",
          mvc001: 125472,
          mvc002: 100147,
          mvc003: 25325,
          mvc004: 69340,
          mvc005: 115735,
          mvc006: 13702,
          mvc007: 9259,
          mvc008: 34,
          mvc009: 0.92,
          mvc010: 553,
          mvc011: 28,
          mvc012: 0.89,
        },
      ],
      newOdTableData: [
        {
          id: 1,
          date: "2024-01",
          newOd001: 4480,
          newOd002: 93.74,
          newOd003: 20917.7,
          newOd004: 2390,
          newOd005: 1490,
        },
      ],
      oilPollutionTableData: [
        {
          date: "2024-01",
          oilPollution001: 7000,
          oilPollution002: 0,
          oilPollution003: 0,
          oilPollution004: 4280,
          oilPollution005: 611,
          oilPollution006: 3352,
          oilPollution007: 3314,
          oilPollution008: 0.48,
          oilPollution009: 226,
          oilPollution010:
            "污油罐、密闭站乳化油、除油罐/调储罐收浮渣、事故池回油",
          oilPollution011: "净化油罐",
        },
      ],
      editedRows: new Set(), // 存储被编辑的行
    };
  },
  mounted() {},
  created() {
    // 调用方法，生成更多数据，例如添加10条
    this.addMoreData(10);
  },
  beforeDestroy() {},
  methods: {
    handleInput(scope, field) {
      const value = scope.row[field];
      // 转换为数字，如果为空则设置为 NaN 或其他默认值
      scope.row[field] = value === "" ? null : Number(value);
      this.markAsEdited(scope.row);
    },
    // 标记被编辑的行
    markAsEdited(row) {
      this.editedRows.add(row);
    },
    // 保存按钮点击事件
    handleEdit(row) {
      if (this.editedRows.has(row)) {
        console.log("row", row);
        // 调用后端 API 进行更新
        this.updateRecord(row)
          .then((response) => {
            this.$message.success("保存成功");
            this.editedRows.delete(row); // 保存后取消标记
          })
          .catch((error) => {
            this.$message.error("保存失败，请重试");
          });
      } else {
        this.$message.info("无更改无需保存");
      }
    },
    // 更新记录的后端调用
    async updateRecord(row) {
      // 示例后端 API 请求
      const url = `/api/updateRecord`;
      const response = await axios.post(url, {
        date: row.date,
        mvc001: row.mvc001,
        mvc004: row.mvc004,
        mvc009: row.mvc009,
      });
      return response.data;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 处理页码变更
    handlePageChange(page) {
      this.currentPage = page;
    },
    // mvc处理页码变更
    mvchandlePageChange(page) {
      this.mvcCurrentPage = page;
    },
    // newOd处理页码变更
    newOdhandlePageChange(page) {
      this.newOdCurrentPage = page;
    },
    // oilPollution处理页码变更
    oilPollutionhandlePageChange(page) {
      this.oilPollutionCurrentPage = page;
    },
    // 处理每页条数变更
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 重置为第一页
    },
    // mvc处理每页条数变更
    mvchandleSizeChange(size) {
      this.mvcPageSize = size;
      this.mvcCurrentPage = 1; // 重置为第一页
    },
    // newOd处理每页条数变更
    newOdhandleSizeChange(size) {
      this.newOdPageSize = size;
      this.newOdCurrentPage = 1; // 重置为第一页
    },
    // oilPollution处理每页条数变更
    oilPollutionhandleSizeChange(size) {
      this.oilPollutionPageSize = size;
      this.oilPollutionCurrentPage = 1; // 重置为第一页
    },
    addMoreData(repeatCount) {
      // 获取现有的数据作为模板
      const templateData = this.tableData[0];
      const templateData2 = this.mvcTableData[0];
      const templateData3 = this.newOdTableData[0];
      const templateData4 = this.oilPollutionTableData[0];
      // 添加指定数量的重复数据
      for (let i = 1; i <= repeatCount; i++) {
        const newData = { ...templateData };
        const newData2 = { ...templateData2 };
        const newData3 = { ...templateData3 };
        const newData4 = { ...templateData4 };
        // 更新日期或其他字段，以使每条数据项有所区别
        newData.date = `2024-${(i + 1).toString().padStart(2, "0")}`;
        newData2.date = `2024-${(i + 1).toString().padStart(2, "0")}`;
        newData3.date = `2024-${(i + 1).toString().padStart(2, "0")}`;
        newData4.date = `2024-${(i + 1).toString().padStart(2, "0")}`;
        this.tableData.push(newData);
        this.mvcTableData.push(newData2);
        this.newOdTableData.push(newData3);
        this.oilPollutionTableData.push(newData4);
      }
      this.addSummaryRow(this.tableData, calculationConfig);
      this.calculatelastRowTableData();
      this.addSummaryRow(this.mvcTableData, mvcCalculationConfig);
      this.calculateMvclastRowTableData();
      this.addSummaryRow(this.newOdTableData, newOdCalculationConfig);
      this.addSummaryRow(
        this.oilPollutionTableData,
        oilPollutionCalculationConfig
      );
      this.calculateOilPollutionlastRowTableData();
    },
    calculatelastRowTableData() {
      // 获取表格的最后一行数据
      const lastRow = this.tableData[this.tableData.length - 1];

      if (lastRow) {
        lastRow.normOilProcess001 = +(
          (lastRow.normOil003 / lastRow.normOil001) *
          1000
        ).toFixed(2);
        lastRow.normOilProcess002 = +(
          (lastRow.normOil004 / (lastRow.normOil002 + lastRow.sagdSealed005)) *
          1000
        ).toFixed(2);
        lastRow.sagdSealedProcess001 = +(
          (lastRow.sagdSealed002 / lastRow.sagdSealed001) *
          1000
        ).toFixed(2);
        lastRow.sagdSealedProcess002 = +(
          (lastRow.sagdSealed003 / lastRow.sagdSealed001) *
          1000
        ).toFixed(2);
        // 避免除零情况
        lastRow.sagdRecycleProcess001 =
          lastRow.sagdRecycle001 !== 0
            ? +(
                (lastRow.sagdRecycle002 / lastRow.sagdRecycle001) *
                1000
              ).toFixed(2)
            : 0;
        lastRow.sagdRecycleProcess002 =
          lastRow.sagdRecycle001 !== 0
            ? +(
                (lastRow.sagdRecycle003 / lastRow.sagdRecycle001) *
                1000
              ).toFixed(2)
            : 0;
        lastRow.foulWaterProcess001 = +(
          (lastRow.foulWater006 / lastRow.foulWater004) *
          1000 *
          0.4
        ).toFixed(2);
        lastRow.foulWaterProcess002 =
          lastRow.foulWater005 !== 0
            ? +((lastRow.foulWater007 / lastRow.foulWater005) * 1000).toFixed(2)
            : 0;
        lastRow.foulWaterProcess003 =
          lastRow.foulWater004 !== 0
            ? +((lastRow.foulWater008 / lastRow.foulWater004) * 3).toFixed(2)
            : 0;
        lastRow.foulWaterProcess004 =
          lastRow.foulWater005 !== 0
            ? +((lastRow.foulWater009 / lastRow.foulWater005) * 3).toFixed(2)
            : 0;
        lastRow.foulWaterProcess005 =
          lastRow.foulWater010 !== 0
            ? +((lastRow.foulWater011 / lastRow.foulWater010) * 1000).toFixed(2)
            : 0;
        lastRow.foulWaterProcess006 =
          lastRow.foulWater010 !== 0
            ? +((lastRow.foulWater012 / lastRow.foulWater010) * 250).toFixed(2)
            : 0;
        lastRow.mudProcess001 =
          lastRow.mud001 !== 0
            ? +((lastRow.mud002 / lastRow.mud001) * 2000).toFixed(2)
            : 0;
      }
    },
    calculateMvclastRowTableData() {
      // 获取表格的最后一行数据
      const lastRow = this.mvcTableData[this.mvcTableData.length - 1];
      if (lastRow) {
        // 计算新字段并保留两位小数
        lastRow.mvc009 = +(lastRow.mvc005 / lastRow.mvc001).toFixed(2);
        lastRow.mvc010 = +((lastRow.mvc004 / lastRow.mvc001) * 1000).toFixed(2);
        lastRow.mvc011 = +((lastRow.mvc008 + 106.88) / 5.0446).toFixed(2);
        lastRow.mvc012 = +(1 - lastRow.mvc006 / lastRow.mvc001).toFixed(2);
      }
    },
    calculateOilPollutionlastRowTableData() {
      if (this.oilPollutionTableData.length === 0) return;
      // 计算每个月的天数总和，但排除最后一行
      let totalDays = 0;
      this.oilPollutionTableData.slice(0, -1).forEach((item) => {
        totalDays += this.getDaysInMonth(item.date);
      });
      // 获取表格的最后一行数据
      const lastRow =
        this.oilPollutionTableData[this.oilPollutionTableData.length - 1];
      // 对最后一行数据进行计算
      if (lastRow) {
        lastRow.oilPollution003 = +(
          (lastRow.oilPollution002 / lastRow.oilPollution001) *
          1000
        ).toFixed(2);
        lastRow.oilPollution005 = +(
          (lastRow.oilPollution004 / lastRow.oilPollution001) *
          1000
        ).toFixed(2);
        lastRow.oilPollution008 = +(
          lastRow.oilPollution006 / lastRow.oilPollution001
        ).toFixed(2);
        lastRow.oilPollution009 = +(
          lastRow.oilPollution001 / totalDays
        ).toFixed(2);
        lastRow.oilPollution010 =
          "污油罐、密闭站乳化油、除油罐/调储罐收浮渣、事故池回油";
        lastRow.oilPollution011 = "净化油罐";
      }
    },
    // 获取月份天数的辅助函数
    getDaysInMonth(dateString) {
      const [year, month] = dateString.split("-").map(Number);
      return new Date(year, month, 0).getDate(); // 月份传递 month 时是从 0 开始计数
    },
    // // 计算每列的总和并添加"全年合计"行
    // addSummaryRow(tableData) {
    //   const summaryRow = { date: "全年合计" };
    //   // 动态获取需要计算总和的列名（排除 'date' 列）
    //   const columns = Object.keys(tableData[0]).filter(
    //     (column) => column !== "date"
    //   );
    //   // 遍历每个列，计算每列的总和，并取整
    //   columns.forEach((column) => {
    //     summaryRow[column] = Math.round(
    //       tableData.reduce((sum, row) => {
    //         return sum + (row[column] || 0);
    //       }, 0)
    //     );
    //   });
    //   // 将合计行添加到表格数据
    //   tableData.push(summaryRow);
    // },
    addSummaryRow(tableData, calculationConfig) {
      const summaryRow = { date: "全年合计" };
      // 动态获取需要计算的列名（排除 'date' 列）
      const columns = Object.keys(tableData[0]).filter(
        (column) => column !== "date"
      );
      // 遍历每列，按配置计算总和或平均值
      columns.forEach((column) => {
        const isSum = calculationConfig[column] === "sum";
        const total = tableData.reduce((sum, row) => {
          return sum + (row[column] || 0);
        }, 0);
        // 如果是求和，直接使用总和；如果是求平均，使用总和除以行数
        const result = isSum ? total : total / tableData.length;
        // 保留两位小数并转为数值
        summaryRow[column] = parseFloat(result.toFixed(2));
      });
      // 将合计行添加到表格数据
      tableData.push(summaryRow);
    },
  },
  computed: {
    // 总数据量
    totalItems() {
      return this.tableData.length;
    },
    mvcTotalItems() {
      return this.mvcTableData.length;
    },
    newOdTotalItems() {
      return this.newOdTableData.length;
    },
    oilPollutionTotalItems() {
      return this.oilPollutionTableData.length;
    },
    // 分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
    // mvc分页后的数据
    paginatedMvcData() {
      const start = (this.mvcCurrentPage - 1) * this.mvcPageSize;
      const end = this.mvcCurrentPage * this.mvcPageSize;
      return this.mvcTableData.slice(start, end);
    },
    // newOd分页后的数据
    paginatednewOdData() {
      const start = (this.newOdCurrentPage - 1) * this.newOdPageSize;
      const end = this.newOdCurrentPage * this.newOdPageSize;
      return this.newOdTableData.slice(start, end);
    },
    // 油污处理分页后的数据
    paginatedoilPollutionData() {
      const start =
        (this.oilPollutionCurrentPage - 1) * this.oilPollutionPageSize;
      const end = this.oilPollutionCurrentPage * this.oilPollutionPageSize;
      return this.oilPollutionTableData.slice(start, end);
    },
  },
};
</script>
<style scoped lang="scss">
.el-table_row .warning-row {
  background-color: red;
}

h1 {
  color: rgb(104, 224, 223);
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}
/* .container{
  height: 100vh;
} */
.table-content {
  border: 3px solid rgb(30, 94, 158);
  width: 93%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 50px;
  /* margin:80px auto; */
  // height: 95vh;
  // overflow: auto;
}
.container {
  /* max-width: 600px;   */
  background-color: rgb(2, 16, 79);
  height: 100vh;
  overflow-x: auto; /* 设置横向滚动 */
  white-space: nowrap; /* 防止内容自动换行 */
}
.el-table {
  // overflow: auto;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 20px;

  /* height: 2000px; */
  border-color: #f0f0f0;
  border-width: 2px;

  /* background-color: red; */
}
</style>
